<!-- https://element.eleme.cn/#/zh-CN/component/table -->

<template>
    <div>
        <el-button type="primary" round @click="openAddDialog">添加</el-button>
        <el-table :data="userList" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <span>{{ props.row.age }}</span>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <span>{{ props.row.email }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column label="邮箱" prop="email">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="line">
                    <el-button size="mini" @click="openEditDrawer(line.row.id)">编辑</el-button>
                    <el-button size="mini" @click="deleteUser(line.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹出框 start -->
        <el-dialog title="添加" :visible.sync="userAddVisible">
            <el-form :model="user0" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="user0.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="user0.age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="user0.email"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 弹出框 end -->
        <!-- 抽屉 start -->
        <el-drawer title="修改用户" :visible.sync="userEditVisible" direction="rtl">
            <!-- 修改表单 start -->
            <el-form :model="user" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="user.age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editUser">修改</el-button>
                    <el-button @click="userEditVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- 修改表单 end -->
        </el-drawer>
        <!-- 抽屉 end -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            userList: [],
            userAddVisible: false,
            userEditVisible: false,
            user0: {},
            user: {}
        }
    },
    methods: {
        async loadUserList() {
            let url = `http://localhost:1800/users`
            let { data: userResult } = await axios.get(url)
            this.userList = userResult.data
        },
        openAddDialog() {
            this.userAddVisible = true
        },
        async addUser() {
            var url = `http://localhost:1800/user`
            let { data: userResult } = await axios.post(url, this.user0)
            if (userResult.code == 20000) {
                this.$message.success(userResult.message)
                this.loadUserList()
                this.userAddVisible = false
            } else {
                this.$message.error(userResult.message)
            }
        },
        async openEditDrawer(uid) {
            this.userEditVisible = true
            let url = `http://localhost:1800/user/${uid}`
            let { data: userResult } = await axios.get(url)
            this.user = userResult.data
        },
        async editUser() {
            var url = `http://localhost:1800/user`
            let { data: userResult } = await axios.put(url, this.user)
            if (userResult.code == 20000) {
                this.$message.success(userResult.message)
                this.loadUserList()
                this.userEditVisible = false
            } else {
                this.$message.error(userResult.message)
            }
        },
        deleteUser(uid) {
            this.$confirm('确定删除?', '删除提示', {
                type: 'warning'
            }).then(async () => {
                let url = `http://localhost:1800/user/${uid}`
                let { data: baseResult } = await axios.delete(url)
                if (baseResult.code == 20000) {
                    this.$message.success(baseResult.message)
                    this.selectAllClasses()
                } else {
                    this.$message.error(baseResult.message)
                }
            }).catch(() => {
                // 
                this.$message.info('用户已取消')
            });
        }
    },
    mounted() {
        this.loadUserList()
    },
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>